<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import headerNavBar from '@/components/headerNavBar.vue';
import { useLargenScreen } from '@/composables/useLargenScreen';
import mitt from '@/utils/mitt';
import { showConfirmDialog } from 'vant';

const router = useRouter();

// 监听浏览器窗口变化
const [largenScreen] = useLargenScreen();

const showHeaderButton = ref(false);
// 设置头部按钮
const setHeader = (state: any) => {
  showHeaderButton.value = !!state;
};

mitt.on('setHeader', setHeader);

onBeforeUnmount(() => {
  mitt.off('setHeader', setHeader);
});

const onClickRight = async () => {
  try {
    await showConfirmDialog({
      title: '提示',
      message: '仅产品供应商结算开户使用（绑卡认证请点击下方添加银行卡）',
    });
    router.push('/userInfoOpenAccount');
  } catch {
    /** empty */
  }
};
</script>
<template>
  <div class="bankCard" :class="{ boxShadow: largenScreen }">
    <headerNavBar :rightText="showHeaderButton ? '结算开户' : ''" @onClickRight="onClickRight" />
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>
<style lang="less" scoped>
.bankCard {
  max-width: 400px;
  margin: 0 auto;
}
.bankCard.boxShadow {
  // main {
  //   height: 80vh;
  // }
  margin: 3vh auto;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
</style>
